<template>
  <div class="history">
    <van-nav-bar
      placeholder
      fixed
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    >
      <!-- 自定义标题部分 -->
      <template #title>
        <div class="search-bar flex aic jc-sb ">
          <div class="search-input-container flex aic">
            <i class="iconfont icon-31sousuo f20 mr-30"></i>
            <input
              type="text"
              class="search-input"
              placeholder="请输入搜索关键词"
            />
          </div>
          <span class="manage ml-10">管理</span>
        </div>
      </template>
    </van-nav-bar>

    <!-- 列表 -->
    <van-checkbox-group v-model="selectedItems">
      <dl class="h-list mt-10">
        <div class="line flex mt-10">
          <li class="item flex fdc bg-fff pl-10 pr-10">
            <img src="../../assets/img/huanggua.png" />
            <h4 class="pt-10">【山东】水果牛奶白玉黄瓜 5斤装（18-25根）</h4>
            <span class="red pt-10">￥39.90</span>
            <dt class="flex jc-sb aic pt-10">
              <span class="gray">销量: 99974</span>
              <van-checkbox
                name="1"
                checked-color="#c03131"
                icon-size="20px"
              ></van-checkbox>
            </dt>
          </li>
          <li class="item flex fdc bg-fff pl-10 pr-10 ml-10">
            <img src="../../assets/img/xigua.png" />
            <h4 class="pt-10">【河北】红袖添香 甄西瓜 礼盒装1枚（2斤）</h4>
            <span class="red pt-10">￥39.90</span>
            <dt class="flex jc-sb aic pt-10">
              <span class="gray">销量: 9977</span>
              <van-checkbox
                name="2"
                checked-color="#c03131"
                icon-size="20px"
              ></van-checkbox>
            </dt>
          </li>
        </div>
        <div class="line flex mt-10">
          <li class="item flex fdc bg-fff pl-10 pr-10">
            <img src="../../assets/img/orange1.png" />
            <h4 class="pt-10">
              【云南】新鲜冰糖橙 5斤装 （果径60mm+/枚）20-30个
            </h4>
            <span class="red pt-10">￥29.90</span>
            <dt class="flex jc-sb aic pt-10">
              <span class="gray">销量: 99290</span>
              <van-checkbox
                name="3"
                checked-color="#c03131"
                icon-size="20px"
              ></van-checkbox>
            </dt>
          </li>
          <li class="item flex fdc bg-fff pl-10 pr-10 ml-10">
            <img src="../../assets/img/apple.png" />
            <h4 class="pt-10">【山西】红富士苹果 8-10枚5斤装（果径80mm/枚）</h4>
            <span class="red pt-10">￥34.80</span>
            <dt class="flex jc-sb aic pt-10">
              <span class="gray">销量: 9053</span>
              <van-checkbox
                name="4"
                checked-color="#c03131"
                icon-size="20px"
              ></van-checkbox>
            </dt>
          </li>
        </div>
        <div class="line flex mt-10">
          <li class="item flex fdc bg-fff pl-10 pr-10">
            <img src="../../assets/img/redapple.png" />
            <h4 class="pt-10">海南】红心火龙果礼盒装 5斤装（5-7枚）</h4>
            <span class="red pt-10">￥69.90</span>
            <dt class="flex jc-sb aic pt-10">
              <span class="gray">销量: 9953</span>
              <van-checkbox
                name="5"
                checked-color="#c03131"
                icon-size="20px"
              ></van-checkbox>
            </dt>
          </li>
        </div>
      </dl>
    </van-checkbox-group>

    <footer class="w100p bg-fff fixed flex aic jc-sb pl-10 pr-10">
      <van-checkbox
        class=""
        :value="all"
        checked-color="#c03131"
        icon-size="20px"
        @change="toggleAll"
        >全选</van-checkbox
      >
      <button class="gradient11 fff" @click="deleteSelected">一键删除</button>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [], // 选中的复选框的 name 值数组
      all: false, //是否全选
    };
  },
  methods: {
    // 切换全选状态
    toggleAll() {
      if (this.all) {
        // 如果全选，将所有复选框的 name 值添加到 selectedItems
        this.selectedItems = this.$refs.checkboxGroup.getNames();
      } else {
        // 如果取消全选，清空 selectedItems
        this.selectedItems = [];
      }
    },
    // 删除选中的商品
    deleteSelected() {
      if (this.selectedItems.length === 0) {
        this.$toast('请先选择商品');
        return;
      }
      this.$dialog.confirm({
        message: '确定要删除选中的商品吗？',
      }).then(() => {
        // 执行删除操作
        this.$toast('删除成功');
        this.selectedItems = []; // 清空选中状态
        this.all = false; // 取消全选状态
      }).catch(() => {
        // 取消操作
      });
    },
  },
};
</script>

<style lang="less">
@import "./history.less";
</style>
